<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>_商品库存管理</title>
    <script type="text/javascript">
    	var filterParam = {};
		var datatable_content;
		function initTable(){
			datatable_content = $("#skuTable").dataTable({
			   "bServerSide":true,
			   "bAutoWidth":false,
	           "sAjaxSource":'${ctx}/focusProductManager/page',
	           "fnServerData": callback,
	           "fnRowCallback":rowCallBack,
	           "bFilter": false,
	           "bSort": false,
	           "sZeroRecords": "查询无记录！",
	           "bProcessing": true,
	           "oLanguage": {
	               "sUrl": '${ctx}/static/v2/js/plugins/datatables/cn.txt'
	            },
	             "aoColumns":[
	             	{"mData": null},
	             	 {"mData": "sku"},
	             	 {"mData": null},
	             	 {"mData": null},
	             	 {"mData": null},
	             	 {"mData": "salesNum"},
	             	 {"mData": "unusedNum"},
	             	 {"mData": "orderNum"},
	             	 {"mData": "lockedNum"},
	             	 {"mData": "transportNum"},
	             	 {"mData": "airNum"},
	             	 {"mData": "totalNum"},
	             	 {"mData": null},
	             ],
	             "aoColumnDefs":[
	             	{"aTargets": [2],
		              "mRender": function (data, display, row) {
		              		return row.ediGoodsSku ? row.ediGoodsSku.bar : "";
			           }
		            },
	             	{"aTargets": [3],
		              "mRender": function (data, display, row) {
		              		return row.ediGoodsSku ? row.ediGoodsSku.skuName : "";
			           }
		            },
	             	{"aTargets": [4],
		              "mRender": function (data, display, row) {
		              		return row.ediGoodsSku ? row.ediGoodsSku.col : "";
			           }
		            },
	             	{"aTargets": [12],
		              "mRender": function (data, display, row) {
		              		return "<a href=\"#detail\" data-toggle=\"modal\" class=\"btn btn-primary \""+
						      "name=\""+row.customer.customerName+"_"+row.warehouseCode+"_"+row.sku+"\""+
						      "id=\""+row.customer.customerCode+"_"+row.warehouseCode+"_"+row.sku+"\" onclick=\"showDetail(this);\">查看明细</a>";
			           }
		            },
	             ],
			});
		}
		function filter(item){
			filterParam[item.name] = item;
		}
		function callback(sSource, aoData, fnCallback ) {
		   	var formParam = $("#inputForm").serializeArray();
			for(var n in filterParam){
				formParam.push(filterParam[n]);
			}
		   $.ajax({ 
		       "type": "post",
		       "contentType": "application/json", 
		       "url": sSource,    
		       "dataType": "json",   
		       "data": JSON.stringify(aoData.concat(formParam)),
		       "success": fnCallback  
		   });
		}
		
		/**
		*创建了行的回调
		*nRow为当前的tr
		*/
		function rowCallBack(nRow, aData, iDisplayIndex, iDisplayIndexFull){
			var iDisplayStart = datatable_content.fnSettings()._iDisplayStart;
			$("td:eq(0)", nRow).html(iDisplayStart+iDisplayIndex+1);
		}
		
		function load(){
			if($("#inputForm").valid()){
				if (datatable_content) {
					datatable_content.fnDestroy();
				}
				initTable();
			}
		}
    $(function(){
    	$("#inputForm").validate();
    });
    
    function showDetail(e){
	      var id=$(e).attr("id");
	      var info=id.split("_");
	      var customerCode=info[0];
	      var warehouseCode=info[1];
	      var sku=info[2];
	      
	      
	      var name=$(e).attr("name");
	      var info2=name.split("_");
	      var customerName=info2[0];
	      var warehouseCode=info2[1];
	      
	      $("#customerName").html(customerName);
	      $("#warehouseName").html(warehouseCode);
	      $("#sku").html(sku);
	      
	      $.ajax({
			    type : 'post',
				url : '${ctx}/cusStock/stockDetail',
				data : {
					customerCode:customerCode,
					warehouseCode:warehouseCode,
					sku:sku
				},
				dataType : 'json',
				success : function(data) {
					var stockList = data.stockList;
					
					//库位信息
					$("#detail_content").html("");
					var str='';
					$.each(stockList, function(i) {
					   var stock=stockList[i];
					   str+="<tr>";
					   str+="<td>"+stock.stockCode+"</td>";
					   str+="<td>"+stock.boxCode+"</td>";
					   str+="<td>"+stock.batchCode+"</td>";
					   str+="<td>"+stock.productDate+"</td>";
					   str+="<td>"+stock.expireDate+"</td>";
					   str+="<td>"+stock.salesNum+"</td>";
					   str+="<td>"+stock.unusedNum+"</td>";
					   str+="<td>"+stock.orderNum+"</td>";
					   str+="<td>"+stock.lockedNum+"</td>";
					   str+="<td>"+stock.transportNum+"</td>";
					   str+="<td>"+stock.airNum+"</td>";
					   str+="<td>"+stock.totalNum+"</td>";
					   str+="</tr>";
					});
					$("#detail_content").html(str);
					
				},
				error : function() {
					alert("网络繁忙，请稍后重试...");
				}
			}); 
	  }
	  
	   function ajaxAreaGroupItem(item) {
		   ajaxAreaGroup(item.value);
		}
	
    
    </script>
  </head>
  
  <body>
  <section class="content">
<div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-search"></i>
					<h3 class="box-title">搜索栏</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
       <form method="post" id="inputForm" class="form-search">
       <div class="form-group row">
      		<div class="col-sm-4">
				<div class="input-group col-sm-12">
						<label class="input-group-text">
							<b>客户:</b>
						</label>
						<select name="search_EQ_customer.customerCode" class="form-control required" onchange="ajaxAreaGroup(this,'areaLists')" id="customerId">
							<c:forEach items="${customerList}" var="obj">
								<option value="${obj.customerCode}"
									<c:if test="${customerCode eq obj.customerCode}">selected</c:if>>
									${obj.customerName}
								</option>
							</c:forEach>
						</select>
						</div>
						</div>
						<div class="col-sm-4">
						<div class="input-group col-sm-12">
						<label class="input-group-text">
							<b>网点:</b>
						</label>
						<select name="search_EQ_warehouseCode" class="form-control"  id="areaLists">
							<c:forEach items="${warehouseList}" var="obj">
								<option value="${obj.groupCode}"
									<c:if test="${areaGroupCode eq obj.groupCode}">selected</c:if>>
									${obj.groupName}
								</option>
							</c:forEach>
						</select>
						</div>
						</div>
						<div class="col-sm-4">
				<div class="input-group col-sm-12">
					     <label class="input-group-text">
				         <b>货号:</b>
				       </label>	
				       <input type="text" name="search_LIKE_bar" id="barID" class="form-control" value="${param.search_LIKE_bar}">
				       </div>
				       </div>
				       </div>
				       
				         <div class="form-group row">
				       <div class="col-sm-4">
				<div class="input-group col-sm-12">
				       <label class="input-group-text">
				         <b>SKU编码:</b>
				       </label>	
				       <input type="text" name="search_LIKE_sku"  id="skuID" class="form-control" value="${param.search_LIKE_sku}" />			
						</div>
						</div>
						<div class="col-sm-4">
				<div class="input-group col-sm-12">					    					
						<button type="button" onclick="load();" class="btn btn-info">
							查询
						</button>
						</div>
						</div>
						</div>
       </form>
   </div>
   </div>
   </div>
   </div>
   
   <div class="row">
		<div class="col-md-12">

			<!-- Primary box -->
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-list"></i>
					<h3 class="box-title">查询结果</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
    <!-- sku查询 -->
	<table id="skuTable" class="table table-striped table-bordered table-condensed">
		<thead><tr>
			<th style="width: 50px;">序号</th>
		    <th style="width: 100px;">SKU编码</th>
		    <th style="width: 100px;">货号</th>
		    <th style="width: 100px;">名称</th>
		     <th style="width: 100px;">属性</th>
		    <th style="width: 100px;">可销售库存</th>
		    <th style="width: 100px;">不可销售库存</th>
		    <th style="width: 100px;">订单占用库存</th>
		    <th style="width: 100px;">锁定库存</th>
		    <th style="width: 100px;">调拨占用库存</th>
		    <th style="width: 100px;">调拨中库存</th>
		    <th style="width: 100px;">库存总量</th>
		    <th>操作</th>
		</tr></thead>
		</table>
		</div>
		</div>
		</div>
		</div>
		
	<!-- 库存明细 -------------------------------------------------------------------------------------------------->
	<div class="modal fade"  id="detail" >
	<form id="inputForm"  method="post" class="form-horizontal">
	<div class="modal-dialog" style="width: 900px">
			<div class="modal-content"  >
		<!-- 头 -->
		<div class="modal-header " >
			<span style="font-size: large; font-weight: bold;">库存明细</span>
		</div>
		<!-- 体 -->
		<div class="modal-body" >
		<div class="form-group row">
		<div class="col-md-12">
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-list"></i>
					<h3 class="box-title">sku信息</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse" type="button">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
		   <table class="table table-striped table-bordered table-condensed" >
        	  <thead>
        	    <th >商家</th>
			    <th>商家仓库</th>
			    <th >sku编码</th>
			  </thead>
	          <tr>
	             <td id="customerName"></td>
	             <td id="warehouseName"></td>
	             <td id="sku"></td>
	          </tr>
	        </table>  
		</div>
		</div>
		</div>
		</div>
		<div class="form-group row">
		<div class="col-md-12">
			<div class="box box-solid box-primary">
				<div class="box-header">
					<i class="fa fa-list"></i>
					<h3 class="box-title">库存信息</h3>
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm" data-widget="collapse" type="button">
							<i class="fa fa-minus"></i>
						</button>
					</div>
				</div>
				<div class="box-body">
			<table id="contentTable" class="table table-striped table-bordered table-condensed">
			<thead>
			<tr>
			    <th style="width: 100px;">库位编码</th>
			    <th style="width: 100px;">箱子编码</th>
			    <th style="width: 100px;">批次号</th>
			    <th style="width: 100px;">生产日期</th>
			    <th style="width: 100px;">过期日期</th>
			    <th style="width: 100px;">可销售库存</th>
			    <th style="width: 100px;">不可销售库存</th>
			    <th style="width: 100px;">订单占用库存</th>
			    <th style="width: 100px;">锁定库存</th>
			    <th style="width: 100px;">调拨占用库存</th>
			    <th style="width: 100px;">调拨中库存</th>
			    <th>总量</th>
			</tr></thead>
			<tbody id="detail_content"></tbody>
			</table>		       
		     </div>
		     </div>
		     </div>
		     </div>
		</div>
		<!-- 尾 -->
		<div class="modal-footer bg-gray">
			<a class="btn btn-info" data-dismiss="modal" aria-hidden="true">返回</a>
		</div>
		</div>
		</div>
        </form> 
     </div>
     <!------------------------------------------------------------------------------------------------------------->
     </section>
  </body>
</html>
